<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title>天天放心购－登录</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css">
    <script th:src="@{/js/jquery-1.12.4.min.js}" type="text/javascript"></script>
    <!--    <script th:src="@{/js/login.js}"></script>-->
</head>
<body>

<div class="login_top clearfix">
    <a class="login_logo" th:href="@{/index}"><img th:src="@{/images/logo.png}"></a>
</div>

<div class="login_form_bg">
    <div class="login_form_wrap clearfix">
        <div class="login_banner fl"></div>
        <div class="slogan fl">日夜兼程 · 急速送达</div>
        <div class="login_form fr">
            <div class="login_title clearfix">
                <h1>用户登录</h1>
                <a th:href="@{/user/toRegister}">立即注册</a>
            </div>
            <div class="form_input">
                <form id="from_login" method="post" th:action="@{/user/login}">
                    <input class="name_input" id="username" name="uName" placeholder="请输入用户" type="text" value="">
                    <div class="user_error">输入错误</div>
                    <input class="pass_input" id="pwd" name="pwd" placeholder="请输入密码" type="password" value="">
                    <div class="pwd_error" style="display: none;">输入错误</div>

                    <img alt="captcha" class="captcha" id="img" onclick="changeCheckCode(this)"
                         th:src="@{/checkCode/getCheckCode}">
                    <input id="codes1" name="codes" type="hidden" value="${codes2}">
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            th:(img.src) = "/checkCode/getCheckCode?" + new Date().getTime();
                        }
                    </script>
                    <input id="id_captcha_0" name="captcha_0" type="hidden" value="">
                    <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id_captcha_1"
                           name="code123" placeholder="请输入验证码" spellcheck="false" type="text">


                    <div class="yanzheng_error">请输入验证码</div>
                    <div class="more_input clearfix">
                        <input checked="checked" id="" name="" type="checkbox">
                        <label>记住用户名</label>
                        <a th:href="@{/user/toForgetPwd}">忘记密码</a>
                    </div>
                    <input class="input_submit" name="" type="submit" value="登录">
                </form>
            </div>
        </div>
    </div>
</div>

<div th:include="~{global/header :: footer}"></div>
</body>
</html>
<script>
    $(function () {
        var error_captcha = true;
        $("#id_captcha_1").attr("placeholder", "请输入验证码");

        $("#id_captcha_1").blur(function () {
            captcha();
        });

        function captcha() {
            let len = $('#id_captcha_1').val().length;
            if (len == 0) {
                error_captcha = true;
                $(".yanzheng_error").html("请输入验证码");
                $(".yanzheng_error").show();
            } else if (len !== 4) {
                error_captcha = true;
                $(".yanzheng_error").html("验证码错误");
                $(".yanzheng_error").show();
            } else {
                error_captcha = false;
                $(".yanzheng_error").hide();
            }
        }


        $('#from_login').submit(function () {
            captcha();
            if (error_captcha) {
                return false;
            }
            let da = $(this).serialize();
            $.ajax({
                url: "/user/login",
                type: "post",
                data: da,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        console.log(res);
                        location.href = '/index'
                    } else {
                        alert(res.message);
                        // document.getElementById("img").src="/getCaptcha?" + new Date().getTime();
                    }
                },
                error: function (res) {
                    console.log(res)
                },
            })
            return false;
        })
    })
</script>


